<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>OA系统</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" th:href="@{/assets/i/favicon.png}">
    <link rel="apple-touch-icon-precomposed" th:href="@{/assets/i/app-icon72x72@2x.png}">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>

    <link rel="stylesheet" th:href="@{/assets/css/amazeui.min.css}"/>
    <link rel="stylesheet" th:href="@{/assets/css/amazeui.datatables.min.css}"/>
    <link rel="stylesheet" th:href="@{/assets/css/fullcalendar.min.css}"/>
    <link rel="stylesheet" th:href="@{/assets/css/fullcalendar.print.css}" media='print'/>
    <link rel="stylesheet" th:href="@{/assets/css/app.css}">
    <link rel="stylesheet" th:href="@{/assets/css/flipclock.css}">
    <link rel="stylesheet" th:href="@{/assets/css/todomvc.css}">
    <link rel="stylesheet" th:href="@{/assets/css/calculator.css}">

    <script th:src="@{/assets/js/echarts.min.js}"></script>
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/vue.js}"></script>
    <script th:src="@{/assets/js/amazeui.min.js}"></script>

    <script>var contextPath = "/projectoa";var calculatorIsOpen = false;</script>
</head>
<body data-type="index">
<script th:src="@{/assets/js/theme.js}"></script>
<div class="am-g tpl-g">
    <!-- 头部 -->
    <header id="header">
        <!-- logo -->
        <div class="am-fl tpl-header-logo">
            <a href="index"><img th:src="@{/assets/img/logo.png}" alt=""></a>
        </div>
        <!-- 右侧内容 -->
        <div class="tpl-header-fluid">
            <!-- 侧边切换 -->
            <div class="am-fl tpl-header-switch-button am-icon-list" id="listSwitchButton">
            </div>
            <!-- 天气插件 http://tianqi.2345.com/plugin/setting.htm?style=classicBig2day -->
            <iframe style="margin-top: 15px" allowtransparency="true" frameborder="0" width="200" height="55"
                    scrolling="no"
                    src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=1&t=1&v=0&d=1&bd=0&k=000000&f=0080c0&ltf=009944&htf=cc0000&q=1&e=0&a=1&c=58362&w=200&h=55&align=left"></iframe>
            <!-- 其它功能-->
            <div class="am-fr tpl-header-navbar">
                <ul>
                    <!-- 欢迎语 -->
                    <li class="am-text-sm tpl-header-navbar-welcome">
                        <a href="userinfo/userinfo">欢迎你, <span shiro:principal property="realname"></span> </a>
                    </li>

                    <!-- 新邮件 -->
                    <li class="am-dropdown tpl-dropdown" data-am-dropdown id="messageLi">
                        <a href="javascript:;" class="am-dropdown-toggle tpl-dropdown-toggle" data-am-dropdown-toggle>
                            <i class="am-icon-envelope"></i>
                            <!-- 智能显示消息个数 等于=0则不显示 使用v-cloak可以避免加载中显示出花括号 -->
                            <span class="am-badge am-badge-success am-round item-feed-badge" id="messageUnReadNum"
                                  v-if="messageList.length != 0" v-cloak>{{messageList.length}}</span>
                        </a>
                        <!-- 弹出列表 -->
                        <ul class="am-dropdown-content tpl-dropdown-content" style="width: 400px">
                            <li class="tpl-dropdown-menu-messages" v-if="messageList.length == 0">
                                <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
                                    <div class="menu-messages-content">
                                        <div class="am-text-truncate">
                                            <span>暂无新消息</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="tpl-dropdown-menu-messages" v-else v-for="message in messageList">
                                <a :href="'/projectoa/message/message_dtl/'+message.id"
                                   class="tpl-dropdown-menu-messages-item am-cf">
                                    <div class="menu-messages-content">
                                        <span class="am-text-truncate">{{message.realname}}&nbsp;:&nbsp;{{message.title}}</span>
                                        <span class="menu-messages-content-time" style="float:right">{{message.create_time}}</span>
                                    </div>
                                </a>
                            </li>

                            <li class="tpl-dropdown-menu-messages">
                                <a href="message/message" class="tpl-dropdown-menu-messages-item am-cf">
                                    <i class="am-icon-circle-o"></i> 进入列表…
                                </a>
                            </li>
                        </ul>
                    </li>

                    <!-- 新提示 -->
                    <li class="am-dropdown" data-am-dropdown>
                        <a href="javascript:;" class="am-dropdown-toggle" data-am-dropdown-toggle>
                            <i class="am-icon-bell"></i>
                            <span class="am-badge am-badge-warning am-round item-feed-badge"
                                  v-if="noticeList.length != 0" v-cloak
                                  id="noticeUnReadNum">{{noticeList.length}}</span>
                        </a>

                        <!-- 弹出列表 -->
                        <ul class="am-dropdown-content tpl-dropdown-content" style="width: 400px">
                            <li class="tpl-dropdown-menu-messages" v-if="noticeList.length == 0">
                                <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
                                    <div class="menu-messages-content">
                                        <div class="am-text-truncate">
                                            <span>暂无新消息</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="tpl-dropdown-menu-messages" v-else v-for="notice in noticeList">
                                <a :href="'/projectoa/notice/notice_dtl/'+notice.id"
                                   class="tpl-dropdown-menu-messages-item am-cf">
                                    <div class="menu-messages-content">
                                        <span class="am-text-truncate">{{notice.realname}}&nbsp;:&nbsp;{{notice.title}}</span>
                                        <span class="menu-messages-content-time" style="float:right">{{notice.create_time}}</span>
                                    </div>
                                </a>
                            </li>

                            <li class="tpl-dropdown-menu-notifications">
                                <a href="notice/notice" class="tpl-dropdown-menu-notifications-item am-cf">
                                    <i class="am-icon-bell"></i> 进入列表…
                                </a>
                            </li>
                        </ul>
                    </li>

                    <!-- 主题 -->
                    <li class="am-text-sm">
                        <a href="javascript:;" id="eyeshield">
                            <i class="am-icon-toggle-off" id="eyesI"></i> 护眼
                        </a>
                    </li>

                    <!-- 退出 -->
                    <li class="am-text-sm">
                        <a href="javascript:;" id="exit">
                            <span class="am-icon-sign-out"></span> 退出
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </header>
    <!-- 侧边导航栏 -->
    <div class="left-sidebar">
        <!-- 用户信息 -->
        <div class="tpl-sidebar-user-panel">
            <div class="tpl-user-panel-slide-toggleable">
                <div class="tpl-user-panel-profile-picture"
                     onclick="javascript:window.location.href='/projectoa/userinfo/userinfo'">
                    <img alt="" id="headImageDIV">
                </div>
                <span class="user-panel-logged-in-text">
              <i class="am-icon-circle-o am-text-success tpl-user-panel-status-icon"></i>
              <span shiro:principal property="realname"></span>
          </span>
                <a href="userinfo/changePassWord" class="tpl-user-panel-action-link"><span class="am-icon-pencil">&nbsp;&nbsp;修改密码</span></a>
            </div>
        </div>


        <!-- 菜单 -->
        <ul class="sidebar-nav">
            <li class="sidebar-nav-link">
                <a href="index" id="indexA">
                    <i class="am-icon-home sidebar-nav-link-logo"></i> 首页
                </a>
            </li>
            <shiro:hasRole name="user">
                <li class="sidebar-nav-link">
                    <a href="user/user" id="userA">
                        <i class="am-icon-table sidebar-nav-link-logo"></i> 人员信息
                    </a>
                </li>
            </shiro:hasRole>
            <li class="sidebar-nav-link">
                <a href="userinfo/userinfo" id="userinfoA">
                    <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 个人信息
                </a>
            </li>
            <li class="sidebar-nav-link">
                <a href="calendar" id="calendarA">
                    <i class="am-icon-calendar sidebar-nav-link-logo"></i> 日程表
                </a>
            </li>
            <shiro:hasRole name="admin">
                <li class="sidebar-nav-link">
                    <a href="admin/springbootadmin" id="springbootadminA">
                        <i class="am-icon-heartbeat sidebar-nav-link-logo"></i> 系统监控
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="admin/logs" id="logs">
                        <i class="am-icon-list-alt sidebar-nav-link-logo"></i> 系统日志
                    </a>
                </li>
            </shiro:hasRole>
            <li class="sidebar-nav-link">
                <a href="message/message" id="messageA">
                    <i class="am-icon-envelope sidebar-nav-link-logo"></i> 站内信箱
                </a>
            </li>
            <li class="sidebar-nav-link">
                <a href="notice/notice" id="noticeA">
                    <i class="am-icon-bell sidebar-nav-link-logo"></i> 通知公告
                </a>
            </li>

        </ul>
    </div>
    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <!-- 引入独立部分 -->
        <div th:include="this :: content"></div>
    </div>
    <!-- alert -->
    <div class="am-modal am-modal-alert" tabindex="-1" id="showAlertID">
        <div class="am-modal-dialog">
            <!-- 标题 -->
            <div id="alertTitle" class="am-modal-hd"></div>
            <!-- 内容 -->
            <div id="alertText" class="am-modal-bd"></div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>
    <!-- confirm -->
    <div class="am-modal am-modal-confirm" tabindex="-1" id="showConfirmID">
        <div class="am-modal-dialog">
            <div id="confirmTitle" class="am-modal-hd"></div>
            <div id="confirmText" class="am-modal-bd"></div>
            <div class="am-modal-footer">
                <span id="confirmCancel" class="am-modal-btn" data-am-modal-cancel></span>
                <span id="confirmOK" class="am-modal-btn" data-am-modal-confirm></span>
            </div>
        </div>
    </div>
    <!-- prompt -->
    <div class="am-modal am-modal-prompt" tabindex="-1" id="showPromptID">
        <div class="am-modal-dialog">
            <div class="am-modal-hd" id="promptTitle"></div>
            <div class="am-modal-bd">
                <span id="promptText"></span>
                <input type="text" class="am-modal-prompt-input">
            </div>
            <div class="am-modal-footer">
                <span id="promptCancel" class="am-modal-btn" data-am-modal-cancel></span>
                <span id="promptOK" class="am-modal-btn" data-am-modal-confirm></span>
            </div>
        </div>
    </div>
    <!-- 选择图片 -->
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="changeImageModal">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
                <table>
                    <tr>
                        <th style="padding: 3px" onclick="changeImage(1)"><img th:src="@{/assets/img/01.jpg}"
                                                                               style="width: 120px;cursor:pointer"></th>
                        <th style="padding: 3px" onclick="changeImage(2)"><img th:src="@{/assets/img/02.jpg}"
                                                                               style="width: 120px;cursor:pointer"></th>
                        <th style="padding: 3px" onclick="changeImage(3)"><img th:src="@{/assets/img/03.jpg}"
                                                                               style="width: 120px;cursor:pointer"></th>
                    </tr>
                    <tr>
                        <th style="padding: 3px" onclick="changeImage(4)"><img th:src="@{/assets/img/04.jpg}"
                                                                               style="width: 120px;cursor:pointer"></th>
                        <th style="padding: 3px" onclick="changeImage(5)"><img th:src="@{/assets/img/05.jpg}"
                                                                               style="width: 120px;cursor:pointer"></th>
                        <th style="padding: 3px" onclick="changeImage(6)"><img th:src="@{/assets/img/06.jpg}"
                                                                               style="width: 120px;cursor:pointer"></th>
                    </tr>
                    <tr>
                        <th style="padding: 3px" onclick="changeImage(7)"><img th:src="@{/assets/img/07.jpg}"
                                                                               style="width: 120px;cursor:pointer"></th>
                        <th style="padding: 3px" onclick="changeImage(8)"><img th:src="@{/assets/img/08.jpg}"
                                                                               style="width: 120px;cursor:pointer"></th>
                        <th style="padding: 3px" onclick="changeImage(9)"><img th:src="@{/assets/img/09.jpg}"
                                                                               style="width: 120px;cursor:pointer"></th>
                    </tr>
                </table>
                <input type="text" id="hidden" style="display: none">
            </div>
        </div>
    </div>
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="weatherModal">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                一周天气情况
            </div>
            <div class="am-modal-bd">
                <iframe allowtransparency="true" frameborder="0" width="875" height="98" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=1&v=0&d=5&bd=0&k=000000&f=000080&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=58362&w=875&h=98&align=center"></iframe>
            </div>
        </div>
    </div>
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="calculatorModal">
        <div class="am-modal-dialog">
            <div class="am-modal-hd" style="text-align: center">
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                简易计算器
            </div>
            <div class="am-modal-bd">
                <br/>
                <div id="calcuator">
                    <input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly"/>
                    <div id="btn-list">
                        <div onclick="operator('clear')" class=" btn-30 btn-radius color-red clear-marginleft">C</div>
                        <div onclick="operator('opposite')" class=" btn-30 btn-radius color-blue">+/-</div>
                        <div onclick="operator('percent')" class=" btn-30 btn-radius color-blue">%</div>
                        <div onclick="operator('backspace')" class=" btn-70 btn-radius color-red font-14">←</div>
                        <div onclick="typetoinput('7')" class=" btn-30 btn-radius clear-marginleft">7</div>
                        <div onclick="typetoinput('8')" class=" btn-30 btn-radius">8</div>
                        <div onclick="typetoinput('9')" class=" btn-30 btn-radius">9</div>
                        <div onclick="operator('plus')" class=" btn-30 btn-radius color-blue font-14">+</div>
                        <div onclick="operator('minus')" class=" btn-30 btn-radius color-blue font-14">-</div>
                        <div onclick="typetoinput('4')" class=" btn-30 btn-radius clear-marginleft">4</div>
                        <div onclick="typetoinput('5')" class=" btn-30 btn-radius">5</div>
                        <div onclick="typetoinput('6')" class=" btn-30 btn-radius">6</div>
                        <div onclick="operator('multiply')" class=" btn-30 btn-radius color-blue font-14">×</div>
                        <div onclick="operator('divide')" class=" btn-30 btn-radius color-blue font-12">÷</div>
                        <div onclick="typetoinput('1')" class=" btn-30 btn-radius clear-marginleft">1</div>
                        <div onclick="typetoinput('2')" class=" btn-30 btn-radius">2</div>
                        <div onclick="typetoinput('3')" class=" btn-30 btn-radius">3</div>
                        <div onclick="operator('pow')" class=" btn-30 btn-radius color-blue font-14">×²</div>
                        <div onclick="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12">√</div>
                        <div onclick="typetoinput('0')" class=" btn-70 btn-radius clear-marginleft">0</div>
                        <div onclick="typetoinput('.')" class=" btn-30 btn-radius">.</div>
                        <div onclick="operator('result')" class=" btn-70 btn-radius color-red font-14">=</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 备忘录 -->
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="todomvcModal">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
                <div id="todomvc">
                    <section class="todoapp">
                        <header class="header">
                            <h1 style="margin-top: 60px">备忘录</h1>
                            <input class="new-todo"
                                   autofocus autocomplete="off"
                                   placeholder="想要记录一件什么事?"
                                   v-model="newTodo"
                                   @keyup.enter="addTodo">
                        </header>
                        <section class="main" v-show="todos.length" v-cloak>
                            <input class="toggle-all" type="checkbox" v-model="allDone">
                            <ul class="todo-list">
                                <li v-for="todo in filteredTodos"
                                    class="todo"
                                    :key="todo.id"
                                    :class="{ completed: todo.completed, editing: todo == editedTodo }">
                                    <div class="view">
                                        <input class="toggle" type="checkbox" v-model="todo.completed"
                                               style="left: 5px;">
                                        <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
                                        <button class="destroy" @click="removeTodo(todo)"></button>
                                    </div>
                                    <input class="edit" type="text"
                                           v-model="todo.title"
                                           v-todo-focus="todo == editedTodo"
                                           @blur="doneEdit(todo)"
                                           @keyup.enter="doneEdit(todo)"
                                           @keyup.esc="cancelEdit(todo)">
                                </li>
                            </ul>
                        </section>
                        <footer class="footer" v-show="todos.length" v-cloak>
                            <!--<span class="todo-count">-->
                              <!--<strong>{{ remaining }}</strong> {{ remaining | pluralize }} 剩余的事-->
                            <!--</span>-->
                            <!--<ul class="filters" style="bottom: 0px;" >-->
                                <!--<li><a href="#/all" :class="{ selected: visibility == 'all' }">全部</a></li>-->
                                <!--<li><a href="#/active" :class="{ selected: visibility == 'active' }">进行中</a></li>-->
                                <!--<li><a href="#/completed" :class="{ selected: visibility == 'completed' }">已完成</a>-->
                                <!--</li>-->
                            <!--</ul>-->
                            <button class="clear-completed" style="bottom: 10px;" @click="removeCompleted" v-show="todos.length > remaining">
                                清除所有已完成的
                            </button>
                        </footer>
                    </section>
                    <footer class="info">
                        <p>双击一行可以编辑</p>
                    </footer>
                    <div>


                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/assets/js/amazeui.datatables.min.js}"></script>
    <script th:src="@{/assets/js/dataTables.responsive.min.js}"></script>
    <script th:src="@{/assets/js/app.js}"></script>
    <script th:src="@{/assets/js/moment.js}"></script>
    <script th:src="@{/assets/js/fullcalendar.min.js}"></script>
    <script th:src="@{/assets/js/flipclock.min.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/assets/js/todomvc.js}"></script>
    <script th:src="@{/assets/js/calculator.js}"></script>
    <script>
        $(document).ready(function () {
            //获取护眼模式开关状态
            getThemeToggle();
            // 护眼模式
            $('#eyeshield').on('click', function () {
                changeTheme();
            })
            // 退出按钮
            $('#exit').on('click', function () {
                exit();
            })
            // 左边栏的隐藏按钮
            $('#listSwitchButton').on('click', function () {
                leftSidebar();
            });
            //所有a标签纠正
            $('a').each(function () {
                if ($(this).attr('href') && $(this).attr('href').indexOf('javascript') < 0
                    && $(this).attr('href') && $(this).attr('href').indexOf('projectoa') < 0
                    && $(this).attr('href') != '#')

                    $(this).attr('href', contextPath + "/" + $(this).attr('href'));
            });

            //计算器的JS会监听键盘时间 导致其他组件无法使用退格 故使用以下特殊处理解决
            $('#calculatorModal').on('open.modal.amui', function(){
                calculatorIsOpen = true;
            });
            $('#calculatorModal').on('close.modal.amui', function(){
                calculatorIsOpen = false;
            });
        });
    </script>
</body>
</html>